<template>
	<div class="master-page">
		<div class="master-page-top">
			<top-header :title="header_title" />
			<div class="card-check display-col" v-if="shopInfo">
				<van-swipe class="my-swipe" indicator-color="white">
					<van-swipe-item v-for="(item, index) in shopInfo.imgs_json" :key="index">
						<van-image class="my-swipe-img" :src="item" />
					</van-swipe-item>
				</van-swipe>
				<div class="card-content display">
					<div>
						<div class="padding-12 font-size-22">{{ shopInfo.name }}</div>
						<div
							class="display font-size-16 padding-12 card-content-time font-weight-500"
							style="justify-content: flex-start"
						>
							<span class="font-color-blue display time">营业时间</span>
							<span class="display time">{{ shopInfo.work_day_start }}~{{ shopInfo.work_day_end }}</span>
						</div>
						<div class="font-color-8C9198 padding-0-12 font-size-14">{{ shopInfo.address }}</div>
					</div>
				</div>
			</div>
			<div class="title font-size-18 font-weight-500">{{ list_title }}</div>
		</div>
		<card-list
			class="master-page-cardlist"
			:card_list="card_list"
			:button_text="button_text"
			:module_name="$route.query.module_name"
			:page_config="card_loading_config"
			@onLoad="onLoad"
			@onRefresh="onRefresh"
		/>
		<payCheck :isShop="false" :shop="shopInfo" />
	</div>
</template>

<script>
import TopHeader from '@/components/TopHeader';
import CardList from '@/components/CardList';
import payCheck from '@/components/payCheck';
import cookie from '@/utils/cookie';
export default {
	name: 'index',
	components: {
		TopHeader,
		CardList,
		payCheck,
	},
	data() {
		return {
			button_text: '', //card操作按钮text
			header_title: '', //顶部headertitle
			list_title: '', //列表title
			card_list: [], //card总列表
			card_list_new: [], //接口新获取的列表
			list_total: 0, //列表总数
			default_page: 1, //列表默认页
			card_loading_config: {
				loading: false, //列表加载标识
				finished: false, //列表停止加载标识
				refreshing: false, //列表下拉刷新标识
			},
			shopInfo: {}, //商户信息
			//初始化查询参数
			listParam: {
				type: '',
				status: 1,
				level: 'sku_min_price',
				shop_id: '',
			},
			page: 1,
		};
	},
	mounted() {
		this.$set(this.listParam, 'page', 1);
		this.$set(this.listParam, 'town_id', cookie.get('town_id'));

		this.$set(this.listParam, 'shop_id', this.$route.query.shop_id);
		_api
			.api_userPortal_tourShop_getById({ tour_shop_id: this.$route.query.shop_id })
			.then((res) => {
				console.log(JSON.stringify(res));
				this.shopInfo = res.data;
			})
			.catch((err) => {});
		switch (Number(this.$route.query.type)) {
			case 1:
				this.header_title = '景点详情';
				this.list_title = '门票信息';
				this.button_text = '预定';
				this.$set(this.listParam, 'type', 1);
				setTimeout((_) => {
					document.title = '景点详情';
				}, 200);
				break;
			case 2:
				this.header_title = '酒店详情';
				this.list_title = '房间信息';
				this.button_text = '预定';
				this.$set(this.listParam, 'type', 2);
				setTimeout((_) => {
					document.title = '酒店详情';
				}, 200);
				break;
			case 3:
				this.header_title = '饭店详情';
				this.list_title = '套餐信息';
				this.button_text = '预定';
				this.$set(this.listParam, 'type', 3);
				setTimeout((_) => {
					document.title = '饭店详情';
				}, 200);
				break;
			case 4:
				this.header_title = '商户详情';
				this.list_title = '商品信息';
				this.button_text = '购买';
				this.$set(this.listParam, 'type', 4);
				setTimeout((_) => {
					document.title = '商户详情';
				}, 200);
				break;
			default:
				this.button_text = '';
		}
		this.getCardList();
	},
	methods: {
		//获取商品列表
		getCardList() {
			_api
				.api_userPortal_tourProduct_getListByCon(this.listParam)
				.then((res) => {
					this.card_list_new = res.data.data;
					this.list_total = res.data.total;
					this.concatList();
					// console.log(JSON.stringify(res));
				})
				.catch((err) => {});
		},
		changePage(val) {},

		onLoad(val) {
			//加载列表
			if (this.card_loading_config.refreshing) {
				this.card_list = [];
				this.card_loading_config.refreshing = false;
			}
			this.changePage(this.default_page++);
		},
		concatList() {
			//合并列表
			this.card_list = this.card_list.concat(this.card_list_new);
			this.card_loading_config.loading = false;
			if (this.card_list.length >= this.list_total) {
				this.card_loading_config.finished = true;
			}
		},
		onRefresh() {
			// 清空列表数据
			this.card_list = [];
			this.card_loading_config.finished = false;
			// 重新加载数据
			// 将 loading 设置为 true，表示处于加载状态
			this.card_loading_config.loading = true;
			this.default_page = 1;
			this.onLoad(this.default_page);
		},
	},
};
</script>

<style lang="scss" scoped>
@import 'style.scss';
</style>
